<template>
    <div class="header">
        <div class="left">
            <el-icon class="icon" :size="30" @click="changeCollapse">
                <Expand v-if="isOpen" />
                <Fold v-else />
            </el-icon>
            <div class="title">{{ activeMenu.title }}</div>
        </div>
        <div class="right">用户</div>
    </div>
</template>

<script setup>
import { Expand, Fold } from '@element-plus/icons-vue'
import { useStore } from '@/store';
import { toRefs } from 'vue';
const store = useStore()
const { isOpen, activeMenu } = toRefs(store)
const changeCollapse = () => {
    store.setIsOpen(!isOpen.value)
}

</script>

<style lang="less" scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    .left {
        display: flex;
        align-items: center;

        .icon {
            cursor: pointer;
        }

        .title {
            margin-left: 20px;
            font-size: 14px;
        }
    }
}
</style>